Skip to content

Add anchor attribute #9144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 35 commits into
base: main
Choose a base branch
from
Open

Add anchor attribute #9144

Changes from 33 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
95ebedf
Add anchor attribute
josepharhar Apr 10, 2023
cc6d05d
move new section, remove popover reference
josepharhar Apr 10, 2023
e028845
Merge remote-tracking branch 'origin/main' into anchor
josepharhar Jun 28, 2023
b7bf329
point links to new redirects
josepharhar Jun 28, 2023
add4841
improve implicit anchor element definition
josepharhar Jun 28, 2023
b590be2
add referenced link
josepharhar Jun 28, 2023
86f0fc3
inline list
josepharhar Jul 5, 2023
81d51b7
fix ids in attribute index
josepharhar Jul 5, 2023
3b69887
code->span
josepharhar Jul 5, 2023
8bdce1c
add ref CSSANCHOR
josepharhar Jul 5, 2023
610ae3f
add presentational paragraph
josepharhar Jul 10, 2023
87532cc
Merge branch 'main' into anchor
josepharhar Jan 23, 2024
9ad8934
Move IDL from HTMLElement to Element
josepharhar Jan 24, 2024
0489d5b
fix ref tag
josepharhar Mar 13, 2024
b5be1a3
Merge branch 'main' into anchor
josepharhar Mar 13, 2024
f11da28
add popover integration
josepharhar Mar 26, 2024
06049f9
fix end tag
josepharhar Mar 26, 2024
382b064
move section
josepharhar Apr 8, 2024
fb5e5bb
remove first sentence
josepharhar Apr 8, 2024
3dca84e
remove presentational
josepharhar Apr 9, 2024
420012f
remove presentational paragraph
josepharhar Apr 9, 2024
b354492
remove anchor-name
josepharhar Apr 9, 2024
85e059f
re-add dfn
josepharhar Apr 9, 2024
7da97b5
move idl and use algorithm
josepharhar Apr 9, 2024
b88238e
remove semicolons
josepharhar Apr 9, 2024
0c02dbb
node->element
josepharhar Apr 9, 2024
59d976c
specified->sets
josepharhar Apr 9, 2024
5116e00
add missing p start tag
josepharhar Apr 9, 2024
acdf3ee
Merge remote-tracking branch 'upstream/main' into anchor
josepharhar Apr 9, 2024
ee9c79f
add whitespace to help trigger build
josepharhar Apr 9, 2024
b7da26d
remove get the anchor element algorithm
josepharhar Apr 9, 2024
26a6ab3
add comment to idl
josepharhar Apr 12, 2024
b0be02a
switch back to HTML elements
josepharhar Apr 12, 2024
f7c6b36
move up description sentence
josepharhar Apr 18, 2024
e154788
use attr-label-for text
josepharhar Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 71 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4129,8 +4129,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#content-visibility">'content-visibility'</dfn> property</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-contain/#propdef-content-visibility" data-x="content-visibility-auto">'auto'</dfn> value for <span>'content-visibility'</span></li>
</ul>
</dd>

<p>The following terms are defined in <cite>CSS Anchor Positioning</cite>: <ref>CSSANCHOR</ref></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-anchor-position-1/#implicit-anchor-element">implicit anchor element</dfn></li>
</ul>
</dd>

<dt>Intersection Observer</dt>

Expand Down Expand Up @@ -11771,6 +11776,9 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {
undefined <span data-x="dom-hidePopover">hidePopover</span>();
boolean <span data-x="dom-togglePopover">togglePopover</span>(optional boolean force);
[<span>CEReactions</span>] attribute DOMString? <span data-x="dom-popover">popover</span>;

// The anchor attribute
[<span>CEReactions</span>] attribute Element? <span data-x="dom-anchorElement">anchorElement</span>;
};

<span>HTMLElement</span> includes <span>GlobalEventHandlers</span>;
Expand Down Expand Up @@ -13005,6 +13013,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%

<ul class="brief">
<li><code data-x="attr-accesskey">accesskey</code></li>
<li><code data-x="attr-anchor">anchor</code></li>
<li><code data-x="attr-autocapitalize">autocapitalize</code></li>
<li><code data-x="attr-fe-autofocus">autofocus</code></li>
<li><code data-x="attr-contenteditable">contenteditable</code></li>
Expand Down Expand Up @@ -14011,6 +14020,47 @@ background: transparent">blue&lt;/span>.&lt;/p></code></pre>
</div>


<h5>The <code data-x="attr-anchor">anchor</code> attribute</h5>

<p>If an <span data-x="HTML elements">HTML element</span> has an <dfn element-attr
for="html-global"><code data-x="attr-anchor">anchor</code></dfn> attribute specified, then that
attribute's value must be the <span data-x="concept-ID">ID</span> of an element in the same
<span>tree</span> as the element with the <code data-x="attr-anchor">anchor</code> attribute. The
<code data-x="attr-anchor">anchor</code> attribute allows authors to set a <span
data-x="referenced">reference</span> to the <span>implicit anchor element</span>.
<ref>CSSANCHOR</ref></p>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't catch this before, but "get an attribute by name" will return an Attr node, but what you want is the element in the same tree with that ID. Maybe wording like "the element in the something tree with the something ID, if any". I couldn't find any easily copy-pastable examples :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://html.spec.whatwg.org/#attr-label-for

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason I used "get an attribute by name" is because it uses the Element? reflection machinery from the DOM spec here: https://dom.spec.whatwg.org/#concept-element-attributes-get-by-name

Can I just extract the element from the Attr somehow...? Or should I just copy exactly what https://html.spec.whatwg.org/#attr-label-for does?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bit you could copy and adjust from https://html.spec.whatwg.org/#attr-label-for is:

If the attribute is specified and there is an element in the tree whose ID is equal to the value of the for attribute, and the first such element in tree order is a labelable element, then that element is the label element's labeled control.

I don't think you have any use of an Attr node, in code what you want is basically root.getElementById(element.getAttribute('anchor')), right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I did my best to merge this paragraph into the above one and replace the text with the attr-label-for text. how does it look?

Copy link
Member

@annevk annevk Jun 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still seems broken to me by the way in the popover section. The step only gives you an attribute, but the next step assumes it's a node.

<p>For an <span data-x="HTML elements">HTML element</span> <var>element</var>, its <span>implicit
anchor element</span> is the result of running <span>get an attribute by name</span> given
<var>element</var> and <code data-x="attr-anchor">anchor</code>.</p>

<p>The <dfn data-x="dom-anchorElement"><code>anchorElement</code></dfn> IDL attribute must
<span>reflect</span> the <code data-x="attr-anchor">anchor</code> attribute.

<div class="example">
<p>The following example shows how to use CSS anchor positioning by using the <code
data-x="attr-anchor">anchor</code> attribute to set the implicit anchor element:</p>

<pre><code class="html">&lt;div id="myanchor">myanchor&lt;/div>
&lt;div id="target" anchor="myanchor">target&lt;/div>

&lt;style>
#myanchor {
margin: 100px;
width: 100px;
height: 100px;
}
#target {
position: absolute;
left: anchor(left);
top: anchor(bottom);
width: 100px;
height: 100px;
}
&lt;/style></code></pre>
</div>



<h5><dfn>Embedding custom non-visible data</dfn> with the <code data-x="attr-data-*">data-*</code> attributes</h5>

Expand Down Expand Up @@ -85284,13 +85334,17 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<p>The <span>topmost popover ancestor</span> algorithm will return the topmost (latest in the
<span>showing auto popover list</span>) ancestor popover for the provided popover or top layer
element. Popovers can be related to each other in several ways, creating a tree of popovers.
There are two paths through which one popover (call it the "child" popover) can have a topmost
There are three paths through which one popover (call it the "child" popover) can have a topmost
ancestor popover (call it the "parent" popover):</p>

<ol>
<li><p>The popovers are nested within each other in the node tree. In this case, the descendant
popover is the "child" and its topmost ancestor popover is the "parent".</p></li>

<li><p>A popover has the <code data-x="attr-anchor">anchor</code> attribute set and it points
to an element whose ancestor is also a popover. In this case, the popover with the <code
data-x="attr-anchor">anchor</code> attribute is the "child".</p></li>

<li><p>An invoking element (e.g., a <code>button</code>) has a <code
data-x="attr-popovertarget">popovertarget</code> attribute pointing to a popover. In this case,
the popover is the "child", and the popover subtree the invoking element is in is the
Expand Down Expand Up @@ -85387,6 +85441,9 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<li><p>Run <var>checkAncestor</var> given <var>newPopoverOrTopLayerElement</var>'s parent node
within the <span>flat tree</span>.</p></li>

<li><p>Run <var>checkAncestor</var> given the result of running <span>get an attribute by
name</span> given <var>newPopover</var> and <code data-x="attr-anchor">anchor</code>.</p></li>

<li><p>Run <var>checkAncestor</var> given <var>invoker</var>.</p></li>

<li><p>Return <var>topmostPopoverAncestor</var>.</p></li>
Expand Down Expand Up @@ -132500,6 +132557,10 @@ dialog:popover-open {
background-color: Canvas;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the intention behind this rule? Doesn't this basically end up showing at the static position? Which is still a bit problematic, see w3c/csswg-drafts#9939.


[popover][anchor] {
inset: auto;
}

:popover-open::backdrop {
position: fixed;
inset: 0;
Expand Down Expand Up @@ -139646,6 +139707,11 @@ interface <dfn interface>External</dfn> {
<code data-x="attr-input-alt">input</code>
<td> Replacement text for use when images are not available
<td> <a href="#attribute-text">Text</a>*
<tr>
<th> <code data-x="">anchor</code>
<td> <span data-x="attr-anchor">HTML elements</span>
<td> Sets the <span>implicit anchor element</span> of this element. Also influences the popover hierarchy if the specified element also has the <code data-x="attr-popover">popover</code> attribute.
<td> <span data-x="concept-id">ID</span>*
<tr>
<th> <code data-x="">as</code>
<td> <code data-x="attr-link-as">link</code>
Expand Down Expand Up @@ -142191,6 +142257,9 @@ INSERT INTERFACES HERE
<dt id="refsCSSALIGN">[CSSALIGN]</dt>
<dd><cite><a href="https://w3c.github.io/csswg-drafts/css-align/">CSS Box Alignment</a></cite>, E. Etemad, T. Atkins. W3C.</dd>

<dt id="refsCSSANCHOR">[CSSANCHOR]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-anchor-position-1/">CSS Anchor Positioning</a></cite>, T. Atkins, J. Tompkins, I. Kilpatrick. W3C.</dd>

<dt id="refsCSSANIMATIONS">[CSSANIMATIONS]</dt>
<dd><cite><a href="https://w3c.github.io/csswg-drafts/css-animations/">CSS Animations</a></cite>, D. Jackson, D. Hyatt, C. Marrin, S. Galineau, L. Baron. W3C.</dd>

Expand Down